<template>
  <div class="form-elements">
    <div class="row">
      <div class="col-md-12">
        <vuestic-widget :headerText="'forms.inputs.title' | translate">
          <form>

            <div class="row">
              <div class="col-md-4">
                <fieldset>
                  <div class="form-group">
                    <div class="input-group">
                      <input id="simple-input" required/>
                      <label class="control-label" for="simple-input">{{'forms.inputs.textInput' | translate}}</label><i class="bar"></i>
                    </div>
                  </div>
                  <div class="form-group with-icon-right"
                       :class="{'has-error': errors.has('successfulEmail'), 'valid': isSuccessfulEmailValid}">
                    <div class="input-group">
                      <input
                        id="successfulEmail"
                        name="successfulEmail"
                        v-model="successfulEmail"
                        v-validate="'required|email'"
                        required/>
                      <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
                      <i class="fa fa-check valid-icon icon-right input-icon"></i>
                      <label class="control-label" for="successfulEmail">{{'forms.inputs.emailValidatedSuccess'  | translate}} </label><i
                      class="bar"></i>
                      <small v-show="errors.has('successfulEmail')" class="help text-danger">
                        {{ errors.first('successfulEmail') }}
                      </small>
                    </div>
                  </div>
                  <div class="form-group with-icon-right" :class="{'has-error': errors.has('wrongEmail')}">
                    <div class="input-group">
                      <input
                        id="wrongEmail"
                        name="wrongEmail"
                        v-model="wrongEmail"
                        v-validate="'required|email'"
                        required/>
                      <i class="fa fa-exclamation-triangle icon-right input-icon" v-show="errors.has('wrongEmail')"></i>
                      <label class="control-label" for="wrongEmail">{{'forms.inputs.emailValidated' | translate}}</label><i class="bar"></i>
                      <small v-show="errors.has('wrongEmail')" class="help text-danger">{{ errors.first('wrongEmail')
                        }}
                      </small>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <textarea type="text" id="simple-textarea" required></textarea>
                      <label class="control-label" for="simple-textarea">{{'forms.inputs.textArea' | translate}}</label><i class="bar"></i>
                    </div>
                  </div>
                </fieldset>
              </div>

              <div class="col-md-4">
                <fieldset>
                  <div class="form-group with-icon-left">
                    <div class="input-group">
                      <input id="input-icon-left" name="input-icon-left" required/>
                      <i class="fa fa-envelope-o icon-left input-icon"></i>
                      <label class="control-label" for="input-icon-left">{{'forms.inputs.inputWithIcon' | translate}}</label><i class="bar"></i>
                    </div>
                  </div>
                  <div class="form-group with-icon-right">
                    <div class="input-group">
                      <input v-model="clearableText" id="clear-input" name="clear-input" required/>
                      <i class="fa fa-times icon-right input-icon pointer" @click="clear('clearableText')"></i>
                      <label class="control-label" for="clear-input" role="button">{{'forms.inputs.inputWithClearButton' | translate}}</label><i
                      class="bar"></i>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <input id="inputWithDescription" required title=""/>
                      <label class="control-label" for="simple-input">{{'forms.inputs.textInputWithDescription' | translate}}</label><i
                      class="bar"></i>
                      <small class="help text-secondary">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      </small>
                    </div>
                  </div>
                </fieldset>
              </div>

              <div class="col-md-4">
                <fieldset>
                  <div class="form-group form-group-w-btn">
                    <div class="input-group">
                      <input id="input-w-btn" required/>
                      <label class="control-label" for="input-w-btn">{{'forms.inputs.inputWithButton' | translate}}</label><i class="bar"></i>
                    </div>
                    <div class="btn btn-micro btn-primary">{{'forms.inputs.upload' | translate}}</div>
                  </div>
                  <div class="form-group form-group-w-btn">
                    <div class="input-group">
                      <input id="input-w-btn-round" required/>
                      <label class="control-label" for="input-w-btn-round">{{'forms.inputs.inputWithRoundButton' | translate }}</label><i
                      class="bar"></i>
                    </div>
                    <div class="btn btn-primary btn-with-icon btn-micro rounded-icon">
                      <div class="btn-with-icon-content">
                        <i class="ion-md-cloud-outline ion"></i>
                      </div>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>

          </form>
        </vuestic-widget>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <vuestic-widget :headerText="'forms.selects.title' | translate">
          <form>
            <div class="row">
              <div class="col-md-4">
                <fieldset>
                  <vuestic-simple-select
                    :label="'forms.selects.simple' | translate"
                    v-model="simpleSelectModel"
                    option-key="description"
                    v-bind:options="simpleOptions">
                  </vuestic-simple-select>
                  <vuestic-simple-select
                    :label="'forms.selects.country' | translate"
                    v-model="chosenCountry"
                    v-bind:options="countriesList">
                  </vuestic-simple-select>
                </fieldset>
              </div>
              <div class="col-md-4">
                <fieldset>
                  <vuestic-multi-select
                    :label="'forms.selects.multi' | translate"
                    v-model="multiSelectModel"
                    option-key="description"
                    v-bind:options="simpleOptions">
                  </vuestic-multi-select>
                  <vuestic-multi-select
                    :label="'forms.selects.countryMulti' | translate"
                    v-model="multiSelectCountriesModel"
                    v-bind:options="countriesList">
                  </vuestic-multi-select>
                </fieldset>
              </div>
            </div>
          </form>
        </vuestic-widget>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <vuestic-widget :headerText="'forms.controls.title' | translate">
          <form>
            <div class="row">
              <div class="col-md-3">
                <fieldset>
                  <div class="form-check abc-checkbox abc-checkbox-primary">
                    <input class="form-check-input" id="checkbox1" type="checkbox">
                    <label class="form-check-label" for="checkbox1">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                  <div class="form-check abc-checkbox abc-checkbox-primary">
                    <input class="form-check-input" id="checkbox2" type="checkbox" checked>
                    <label class="form-check-label" for="checkbox2">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                  <div class="form-check abc-checkbox abc-checkbox-primary">
                    <input class="form-check-input" id="checkbox3" type="checkbox" disabled>
                    <label class="form-check-label" for="checkbox3">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                  <div class="form-check abc-checkbox abc-checkbox-primary">
                    <input class="form-check-input" id="checkbox4" type="checkbox" disabled checked>
                    <label class="form-check-label" for="checkbox4">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                </fieldset>
              </div>

              <div class="col-md-3">
                <fieldset>
                  <div class="form-check abc-checkbox abc-checkbox-primary abc-checkbox-circle">
                    <input class="form-check-input" id="checkbox7" type="checkbox">
                    <label class="form-check-label" for="checkbox7">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                  <div class="form-check abc-checkbox abc-checkbox-primary abc-checkbox-circle">
                    <input class="form-check-input" id="checkbox8" type="checkbox" checked>
                    <label class="form-check-label" for="checkbox8">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                  <div class="form-check abc-checkbox abc-checkbox-primary abc-checkbox-circle">
                    <input class="form-check-input" id="checkbox9" type="checkbox" disabled>
                    <label class="form-check-label" for="checkbox9">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                  <div class="form-check abc-checkbox abc-checkbox-primary abc-checkbox-circle">
                    <input class="form-check-input" id="checkbox10" type="checkbox" checked disabled>
                    <label class="form-check-label" for="checkbox10">
                      <span class="abc-label-text">{{'forms.controls.subscribe' | translate}}</span>
                    </label>
                  </div>
                </fieldset>
              </div>

              <div class="col-md-3">
                <fieldset>
                  <div class="form-check radio abc-radio abc-radio-primary">
                    <input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked>
                    <label class="form-check-label" for="radio1">
                      <span class="abc-label-text">{{'forms.controls.radio' | translate}}</span>
                    </label>
                  </div>

                  <div class="form-check radio abc-radio abc-radio-primary">
                    <input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2">
                    <label class="form-check-label" for="radio2">
                      <span class="abc-label-text">{{'forms.controls.radio' | translate}}</span>
                    </label>
                  </div>
                </fieldset>

                <fieldset>
                  <div class="form-check radio abc-radio abc-radio-primary">
                    <input class="form-check-input" type="radio" name="radio3" id="radio3" value="option3" disabled>
                    <label class="form-check-label" for="radio3">
                      <span class="abc-label-text">{{'forms.controls.radioDisabled' | translate}}</span>
                    </label>
                  </div>

                  <div class="form-check radio abc-radio abc-radio-primary">
                    <input class="form-check-input" type="radio" name="radio4" id="radio4" value="option4" checked disabled>
                    <label class="form-check-label" for="radio4">
                      <span class="abc-label-text">{{'forms.controls.radioDisabled' | translate}}</span>
                    </label>
                  </div>
                </fieldset>
              </div>

              <div class="col-md-3">
                <fieldset>
                  <vuestic-switch v-model="isMale">
                    <span slot="trueTitle">{{'forms.controls.male' | translate}}</span>
                    <span slot="falseTitle">{{'forms.controls.female' | translate}}</span>
                  </vuestic-switch>
                </fieldset>
              </div>
            </div>
          </form>
        </vuestic-widget>
      </div>
    </div>
  </div>
</template>

<script>
  import CountriesList from 'data/CountriesList'

  export default {
    name: 'form-elements',

    computed: {
      isSuccessfulEmailValid () {
        let isValid = false
        if (this.formFields.successfulEmail) {
          isValid = this.formFields.successfulEmail.validated && this.formFields.successfulEmail.valid
        }
        return isValid
      }
    },
    data () {
      return {
        isMale: true,
        countriesList: CountriesList,
        chosenCountry: '',
        clearableText: '',
        successfulEmail: 'andrei@dreamsupport.io',
        wrongEmail: 'andrei@dreamsupport',
        simpleOptions: [
          {
            id: 1,
            description: 'First option'
          },
          {
            id: 2,
            description: 'Second option'
          },
          {
            id: 3,
            description: 'Third option'
          }
        ],
        simpleSelectModel: '',
        multiSelectModel: [],
        multiSelectCountriesModel: []
      }
    },
    methods: {
      clear (field) {
        this[field] = ''
      }
    },
    created () {
      this.$nextTick(() => {
        this.$validator.validateAll()
      })
    }
  }
</script>

<style lang="scss">
  .abc-checkbox, .abc-radio {
    display: flex !important;
    justify-content: flex-start;
  }

  input[type=checkbox]:disabled + label, input[type=radio]:disabled + label,
  input[type=checkbox]:disabled, input[type=radio]:disabled {
    cursor: not-allowed;
  }
</style>
